<!DOCTYPE html>
<html>
<head>
	<title>文件上传</title>
	<script type="text/javascript" src="js/login.js"></script>
	<meta charset="utf-8">
	<script src="js/ip.js"></script>
	<link rel="stylesheet" type="text/css" href="css/defaultContainer.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript">
		var globalResult;
		loadFill();
		function loadFill() {
			$.ajax({
				"url":defaultIp+"/listJobSortAll",
				"type":"get",
				"success":function(e){
					console.log(e);
					globalResult=e;
					var html="";
					for(var i=0;i<e.length;i++){
						html+="<option value=\""+i+"\" selected=\"true\">"+e.res[i].jobClassify+"</option>";
						// $("#jobSelect").html("<option value=\"本科\" selected=\"true\">本科</option>");
					}
					$("#jobSelect").html(html);

					flushAll(i-1);
				}
			});
		}
		function flushAll(index) {
			// body...
			$("#filePath").attr('value', globalResult.res[index].hdfsPath);
			$("#id").attr('value', globalResult.res[index].id);
		}

		function uploadFile(){
			$("#showInfo").text("");
			if($("#chooseFile").text()=="选择文件"){
				alert("请选择合适的文件上传");
				return;
			}

			if($("#filePath").val()==""){
				alert("请填写HDFS路径");
				return;
			}

			if($("#id").val()==""){
				alert("请填写职位分类id");
				return;
			}

			var files=document.getElementById("fileSelected").files;
			var path=document.getElementById("fileSelected").value;
			//var fileName=document.getElementById("fileName").value;
			var filePath=document.getElementById("filePath").value;
			var fileId=document.getElementById("id").value;
			document.getElementById("showInfo").hidden=false;
			console.log(files);
			console.log(path);
			console.log(filePath);
			console.log(fileId);
			//console.log(fileName);
			// $("#upload").css({'background-color' : 'gray'});
			$("#upload").attr("disabled", true); 
			$("#upload").val("正在上传..");

			for(var i=0;i<files.length;++i)
			{
				var formData=new FormData();
				//formData.append("fileName",fileName);
				formData.append("file",files[i]);
				formData.append("path",filePath);
				formData.append("id",fileId);
				var iCount=setInterval(getLoc,1500);
				document.getElementById("showInfo").append("上传进度： ");
				$.ajax({
					"url":defaultIp+"/file/upload",
					"type":"post",
					"data":formData,
					"dataType":"text",
					"contentType":false,
					"processData":false,
					"success":function(result){
						$("#showInfo").text("");
						console.log(result);
						document.getElementById("showInfo").append(result+"\n");
						clearInterval(iCount);
						$("#upload").attr("disabled", false); 
						$("#upload").val("上传文件");

						//alert(result);
					},
					"error":function(result){
						$("#upload").attr("disabled", false); 
						$("#upload").val("上传文件");
						clearInterval(iCount);
						console.log(result);
					}
				});
			}
			
			
		}

		function getLoc(argument) {
			document.getElementById("showInfo").append("=");
		}


		function onprogress(evt){
			var loaded = evt.loaded;
			var tot = evt.total;    
			var percent = Math.floor(100*loaded/tot);

			$("#progressBar").value=percent;
		}
		function chooseFileFun(e) {
			console.log(e);
			var fileName=e.files[0].name;
			$("#chooseFile").text(fileName);
		}
	</script>
	<style type="text/css" media="screen">
		#form_panel{
			display:inline-block;
			width: 50%;
			height: 100%;
			margin-top: 20px;
		}
		.fileinput-button {
			position: absolute;
			display: inline-block;
		}

		.fileinput-button input{
			position: absolute;
		}
		#page_title{
			margin-top: 10%;
			margin-bottom: 1%;
			height: 10%;
			width: 80%;
			margin-left: 25%
		}
		#page_title p{
			font-size: 40px;
		}
		#content{
			width: 100%;
		}
		#upload:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
		}
		.a-upload {
			padding: 4px 12px;
			height: 45px;
			line-height: 35px;
			position: relative;
			cursor: pointer;
			color: black;
			background: #ddd;
			border: 1px solid #ddd;
			border-radius: 5px;
			overflow: hidden;
			display: inline-block;
			*display: inline;
			*zoom: 1;
			text-align: center;
		}

		.a-upload  input {
			position: absolute;
			font-size: 40px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer;
			text-align:center;
		}

		.a-upload:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
		}
	</style>
</head>
<body>
	<div id="container" align="left">
		<div id="page_title">
			<div id="page_title_text" class="text ">
				<p><span></span><span>数据文件上传</span></p>
			</div>
		</div>
		<div id="content" align="center">
			<div id="form_panel" align="left">
				<form action="" method="post" enctype="multipart/form-data">
				<!--
			    <input type="file" class="btn btn-default" multiple="multiple" id="fileSelected" name="file" />
			-->
			<a href="javascript:;" class="a-upload">
				<input type="file" name="file" id="fileSelected" onchange="chooseFileFun(this);"><span id="chooseFile">选择文件</span>

			</a>  
			<br>
		<!-- 	<br>
			<input type="text" class="form-control" id="filePath" name="path"  placeholder="请输入HDFS路径(/开头)" />
			<br> -->
			<br>
			<select class="form-control" id="jobSelect" onchange="flushAll(this.value);">
			</select>
			<br>

			<br>
			<input type="text" disabled="true" class="form-control" id="filePath" name="path"  placeholder="HDFS路径"></input>
			<br>

			<br>
			<input type="text" disabled="true" class="form-control" id="id" name="id" placeholder="请输入职位分类id"></input>
			<br>
			<br>
			<input type="button" class="btn btn-default" id="upload" onclick="uploadFile()" value="上传文件" />
			<br>
			<br>
			    <!--
			    <progress value="0" max="100" id="progressBar"></progress>
			-->
			<textarea name="showInfo" id="showInfo" hidden="true" style="width: 400px;height: 400px;">f				
			</textarea>
		</form>
	</div>
</div>
</div>
</body>
</html>